<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--视口宽度根据设备宽度而定-->
		<meta  name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
		<!--视口固定宽度-->
		<!--<meta name="viewport" content="width=750,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
		<!--		
			流式布局利用浮动的特点：在同一行若还有空位则会在同一行显示，位置不足的话就会紧跟在下一行排列。
			也就是说：在小型设备(小屏幕手机：iphone4,iphone5,iphone6) 和中型设备(iphone6 plus 414 或者平板设备)有很好的适应性
		-->
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.fl{
			float: left;
		}
		
		/*.div{
			width: 	375px;
			height: 100px;
			background: deepskyblue;
		}*/
		
		.div1{
			width: 120px;
			height: 100px;
			background: orange;
		}
		
		.div2{
			width: 120px;
			height: 100px;
			background: deeppink;
		}
		
		.div3{
			width: 120px;
			height: 100px;
			background: green;
		}
	</style>
	<body>
		<!--<div class="div">-->
			<div class="div1 fl"></div>
			<div class="div2 fl"></div>
			<div class="div3 fl"></div>
		</div>
	</body>
</html>
